
<toaster-container></toaster-container>
<div class="row mb-2">
    <a href="javascript:;" class="text-link" [routerLink]="['../']">
        <i class="ti-arrow-left"></i> Back to Accounts
    </a>
</div>
<div *ngIf="account" class="row">
    Account synchronized with CRM. Details editable only trough the CRM.
    <span class="col text-right">Last CRM sync: {{account.lastSyncWithCRM | date: 'dd-MM-yyy HH:mm'}}</span>
</div>
<hr>
<div class="row mt-2">
    <div *ngIf="account" class="col-md-4">
        <h3>Account Information</h3>
        <dl>
            <dt>Account Name</dt>
            <dd>{{account.name}}</dd>
            <dt>Relationship Type</dt>
            <dd>{{account.relationshipType}}</dd>
            <dt>Office</dt>
            <dd>{{account.office}}</dd>
            <dt>Account Manager</dt>
            <dd>{{account.accountManager}}</dd>
        </dl>
        <h3>Additional Details</h3>
        <dl>
            <dt>Status</dt>
            <dd>{{account.status}}</dd>
        </dl>
    </div>
    <div class="col-md-8">
        <div class="row mb-3">    
            <div class="col-md-8">
                <select [(ngModel)]="selectedStatus" (change)="getAccountUsers()" class="form-control col-md-6">
                    <option *ngFor="let status of statuses | enumToArray" [ngValue]="status">{{status}} Users</option>
                </select>
            </div>        
            <button class="btn btn-primary-dark col-md-4 pull-right" (click)="resetPass()" [disabled]="selectedUsers.length == 0">
                Reset Password
                <span *ngIf="selectedUsers.length > 0">({{selectedUsers.length}})</span>
            </button>
        </div>
        
        <sustainalytics-table #usersTable [columns]="columns" [source]="users" [take]="pageSize" [elementCount]="count" [paginationPositionDisplay]="paginationPosition"
            [displayTitle]="false" (changed)="tableOptionsChanged($event)" (buttonClicked)="onUserSelectionChanged($event)">
        </sustainalytics-table>
    </div>
</div>